<template>
	
	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar navTitle='测试' :isTitleStyle="true"></CustomNavbar>
	
	<up-index-list :indexList="indexList">
		<template :key="index" v-for="(item, index) in itemArr">
			<!-- #ifdef APP-NVUE -->
			<up-index-anchor :text="indexList[index]"></up-index-anchor>
			<!-- #endif -->
			<up-index-item>
				<!-- #ifndef APP-NVUE -->
				<up-index-anchor :text="indexList[index]"></up-index-anchor>
				<!-- #endif -->
				<view class="list" v-for="(item1, index1) in item" :key="index1">
					<view class="list__item">
				<!-- 		<image class="list__item__avatar" :src="item1.url"></image>
						<text class="list__item__user-name">{{item1.name}}</text> -->
						
						<view class="item">
							<view class="left">
								<image :src="item1.goodsUrl" mode="aspectFill"></image>
							</view>
							<view class="con">
								<view class="title up-line-2">{{ item1.title }}</view>
								<view class="num">
									<view class="left">库存量:</view>
									<view class="right">3</view>
								</view>
								<view class="num">
									<view class="left">销售单价:</view>
									<view class="right">699</view>
								</view>
							</view>
							<view class="right" @click="navigateTo(item1.id)">
								编辑
							</view>
						</view>
						
					</view>
					<up-line></up-line>
				</view>
			</up-index-item>
		</template>
		<template #footer>
			<view class="u-safe-area-inset--bottom">
				<text class="list__footer">共305位好友</text>
			</view>
		</template>
	</up-index-list>
	
	<!-- 自定义tabbar组件【放在窗体外部，否则占据高度】 -->
	<CustomTabBar currentIndex="1"/>
	
	<!-- 新增组件 -->
	<CustomAdd path="/pages/test/update?title=新增测试"/>
	
</template>

<script>
	import { random } from '@/uni_modules/uview-plus'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import CustomAdd from '@/components/CustomAdd.vue'
	const indexList = () => {
		const indexList = []
		const charCodeOfA = 'A'.charCodeAt(0)
		indexList.push("↑")
		indexList.push("☆")
		for (let i = 0; i < 3; i++) {
			indexList.push(String.fromCharCode(charCodeOfA + i))
		}
		indexList.push('#')
		return indexList
	}
	export default {
		data() {
			return {
				indexList: indexList(),
				urls: [
					'https://uview-plus.jiangruyi.com/album/1.jpg',
					'https://uview-plus.jiangruyi.com/album/2.jpg',
					'https://uview-plus.jiangruyi.com/album/3.jpg',
					'https://uview-plus.jiangruyi.com/album/4.jpg',
					'https://uview-plus.jiangruyi.com/album/5.jpg',
				],
				names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使", "山里狼", "supersonic超"]
			}
		},
		components: {
			CustomNavbar,
			CustomAdd
		},
		computed: {
			itemArr() {
				return this.indexList.map(item => {
					const arr = []
					for (let i = 0; i < 3; i++) {
						arr.push({
							id: i,
							name: this.names[random(0, this.names.length - 1)],
							url: this.urls[random(0, this.urls.length - 1)],
							goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/52408/35/3554/78293/5d12e9cfEfd118ba1/ba5995e62cbd747f.jpg!q90.jpg',
							title: '企业微信 中控人脸指纹识别考勤机刷脸机 无线签到异地多店打卡机WX108',
							type: '识别效率高',
							deliveryTime: '使用方便',
							price: 1699,
							number: 9
						})
					}
					return arr
				})
			}
		},
		methods: {
			goNext() {
				uni.navigateTo({
					url: 'indexList2'
				})
			},
			//跳转
			navigateTo(data) {
				uni.navigateTo({
					url: '/pages/test/update?title=编辑测试&id=' + data
				})
			},
		}
	}
</script>

<style lang="scss">
	.list {
		&__item {
			@include flex;
			padding: 6px 12px;
			align-items: center;
			&__avatar {
				height: 35px;
				width: 35px;
				border-radius: 3px;
			}
			&__user-name {
				font-size: 16px;
				margin-left: 10px;
				// color: $u-main-color;
			}
		}
		&__footer {
			// color: $u-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
	}
	
	//订单列表样式开始
	.item {
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #49BDFB;
		height: 180rpx;
		padding-bottom: 10rpx !important;
		background: #fff;
		.left {
			width: 180rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.con {
			flex: 1;
			padding: 0 10rpx !important;
			.title {
				font-weight: 400;
			}
			.num {
				display: flex;
				.left{
					display: flex;
					justify-content: space-between;
					width: 40%;
				}
				.right{
					
				}
			}
		}
		.right {
			padding: 0 10rpx !important;
		}
	}
	//订单列表样式结束
</style>